<template>
  <view class="my-container">
    <view class="area">
      <view class="cell-column">
        <view class="cell-text">
          姓名
        </view>
        <view class="cell-option">
          <input class="input" v-model="name" placeholder="请输入姓名" />
        </view>
      </view>
      <view class="cell-column">
        <view class="cell-text">
          身份证号码
        </view>
        <view class="cell-option">
          <input class="input" type="idcard" v-model="idCard" placeholder="请输入身份证号码" />
        </view>
      </view>
    </view>
    <view class="my-footer" :style="{bottom: GET_SAFEAREA_BOTTOM+'px'}" @click="submitFun">
      <text class="text">提交认证</text>
    </view>
  </view>
</template>

<script>
  import {mapGetters} from 'vuex'
  import store, { GET_SAFEAREA_BOTTOM } from '../../store/index.js';
  import requestPost, {login} from '@/utils/request.js';
  import {isCardID} from '@/utils/verification.js';
  export default{
    data() {
      return {
		userInfo: null,
        name: '',
        idCard: '',
      }
    },
    computed: {
    	...mapGetters([GET_SAFEAREA_BOTTOM])
    },
    mounted() {
      console.log('安全区距离', this.GET_SAFEAREA_BOTTOM)
    },
	onShow(){
	  this.userInfo = Object.prototype.toString.call(uni.getStorageSync('X-UserInfo')) === "[object Object]" ? uni.getStorageSync('X-UserInfo') : null;
		this.idCard = this.userInfo.userIdcode;
    this.name = this.userInfo.realName;
	},
    methods: {
      submitFun(){
        if(!this.name || this.name == '' ){
          uni.showToast({title: '请输入姓名！', icon: 'none'});
          return
        }
        if(!this.idCard || this.idCard == ''){
          uni.showToast({title: '请输入身份证号码！', icon: 'none'});
          return
        }
        if(isCardID(this.idCard) != ''){
          uni.showToast({title: '身份证号码校验未通过！', icon: 'none'});
          return
        }
        uni.showLoading({title: '数据核验中'});
        requestPost("/wxUser/checkIdCodeUnique",{idCode: this.idCard}, '/baseplatform').then(check => {
          if(check.code === 200){
            requestPost('/wxAuth/checkIdCard', {name: this.name, idCard: this.idCard}, '/baseplatform').then(res => {
              uni.hideLoading();
              if(res.code === 200){
                uni.showToast({title: '认证成功！'});
                login(true);
                // uni.navigateBack();
              }else{
                uni.showToast({title: res.msg || '操作失败！', icon: 'none'});
              }
            })
          }else{
            uni.hideLoading();
            uni.showToast({title: check.msg || '该身份证号已被认证！', icon: 'none'});
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .my-container {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #F5F7F6;
  }
  .area{
    width: calc(100% - 64rpx);
    background-color: #FFFFFF;
    margin-top: 16rpx;
    border-radius: 24rpx;
    margin: 16rpx 32rpx 32rpx 32rpx;
  }
  .cell-column{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    height: 104rpx;
    padding: 0 24rpx;
    .cell-text{
      width: 184rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 104rpx;
    }
    .cell-option {
      position: relative;
      width: 100%;
      height: 100%;
      flex: 1;
      .input{
        height: 104rpx;
        line-height: 104rpx;
        font-size: 28rpx;
        padding-left: 32rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
      }
    }
  }
  .my-footer {
    position: fixed;
    bottom: 34rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 598rpx;
    height: 84rpx;
    background: #3FAA73;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    .text {
      font-size: 32rpx;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 32rpx;
    }
  }
</style>